<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;border: solid 1px black;margin:10px;}
        .box>div{display:none}
    </style>
</head>
<body>
    <div class="box">
        <input type="button" id="btn1" value="按钮">
        <div class="cont1">这是第一部分内容</div>
    </div>
    <div class="box">
        <input type="button" id="btn2" value="按钮">
        <div class="cont2">这是第2部分内容</div>
    </div>
    <div class="box">
        <input type="button" id="btn3" value="按钮">
        <div class="cont3">这是第3部分内容</div>
    </div>
</body>
<script>

    // 选择器
    var btn1 = document.querySelector("#btn1");
    var cont1 = document.querySelector(".cont1");
    var btn2 = document.querySelector("#btn2");
    var cont2 = document.querySelector(".cont2");
    var btn3 = document.querySelector("#btn3");
    var cont3 = document.querySelector(".cont3");

    // 绑定事件
    btn1.onclick = function(){
        // 显示当前按钮对应的内容
        cont1.style.display = "block";
        // 隐藏其他内容
        cont2.style.display = "none";
        cont3.style.display = "none";
    }

    btn2.onclick = function(){
        cont1.style.display = "none";
        cont2.style.display = "block";
        cont3.style.display = "none";
    }
    btn3.onclick = function(){
        cont1.style.display = "none";
        cont2.style.display = "none";
        cont3.style.display = "block";
    }
    
</script>
</html>